<template>
	<section>
		<el-row>
			<el-col :span="24">
				<div class="tableTitle">系统菜单</div>
				<el-row style="margin: 10px 0;text-align: right;padding-right: 20px;">
					<el-button type="primary" @click="add" style="">添加</el-button>
				</el-row>

				<el-table :data="tableData" border stripe style="width: 100%">
					<el-table-column prop="menuId" label="ID">
					</el-table-column>
					<el-table-column prop="name" label="菜单名称">
					</el-table-column>
					<el-table-column prop="url" label="菜单地址">
					</el-table-column>
					<el-table-column prop="orderNum" label="排序">
					</el-table-column>
					<el-table-column label="操作" width="300">
						<template slot-scope="scope">
							<el-button size="small" icon="el-icon-edit" type="warning" @click="modify(scope.row)">编辑</el-button>
							<el-button size="small" icon="el-icon-delete" type="danger" @click="deleteMenu(scope.$index,scope.row)">删除</el-button>
						</template>
					</el-table-column>

				</el-table>
			</el-col>
		</el-row>
		<el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
			<el-form :model="dataForm" ref="dataForm" :rules="rules">
				<el-form-item label="菜单名称" prop="name">
					<el-input v-model="dataForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" prop="url">
					<el-input v-model="dataForm.url" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="orderNum">
					<el-input type="tel" v-model="dataForm.orderNum" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="menuSave('dataForm')">确 定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { menuSave, menuDelete, menuList,menuUpdate } from '@/api/getData'

	export default {
		data() {
			return {
				dialogFormVisible: false,
				tableData: [],
				dataForm: {
					name: "",
					url: "",
					menuId:"",
					parentId:"0",
					orderNum:"",
				},
				rules: {

					url: [{
						required: true,
						message: '请输入链接地址',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入菜单名称',
						trigger: 'blur'
					}],
					orderNum: [{
						required: true,
						message: '请输入排序',
						trigger: 'blur',
						//type: 'number'
					}]
				}
			};
		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					const returnData = await menuList({
						pageSize: "100",
						pageNum: "1",
					});
					if(returnData.code == "0") {
						this.tableData = returnData.list.rows;
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			async menuSave(formData) {
				this.$refs[formData].validate(async(valid) => {
					if(valid) {
						try {
							let result = null;
							if(this.dataForm.menuId != ""){
								 result = await menuUpdate(this.dataForm);
							}else{
								 result = await menuSave(this.dataForm);
							}
							if(result.code == "0") {
								this.$message({
									type: 'success',
									message: '保存成功'
								});
								this.dialogFormVisible = false;
								this.initData();
							}
						} catch(err) {
							this.$message({
								type: 'error',
								message: result.msg
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
			},
			async deleteMenu(index, row) {
				try {
					let returnData = await menuDelete({
						id: row.menuId
					});
					if(returnData.code == "0") {
						this.tableData.splice(index, 1);
						this.$message({
							message: "删除成功！",
							type: 'success'
						});
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			add() {
				this.dataForm.name =  "";
				this.dataForm.url = "";
				this.dataForm.menuId = "";
				this.dataForm.orderNum = "";
				this.dialogFormVisible = true;
			},
			modify(row) {
				this.dataForm.name =  row.name;
				this.dataForm.url = row.url;
				this.dataForm.menuId = row.menuId;
				this.dataForm.orderNum = row.orderNum;
				this.dialogFormVisible = true;
			},

		}
	}
</script>

<style scoped>
	.tableTitle {
		background-color: #20a0ff;
		line-height: 40px;
		color: #ffffff;
		padding-left: 10px;
	}
	
	.demo-form-inline {
		margin-top: 20px;
	}
</style>